<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/search.css">
    <link rel="stylesheet" href="../css/card.css">
    <link rel="stylesheet" href="../css/table.css">
    <link rel="stylesheet" href="../css/table.css">
    <link rel="stylesheet" href="../css/footer.css">
</head>

<body>
    <div class="head">
        <div class="head-icon"></div>
        <div class="head-h">教师资格证管理系统</div>
        <div class="head-user">
            <div>肖美芳</div>
            <div>xiaomeifang@outlook.com</div>
        </div>
        <div class="head-user-photo"></div>
    </div>
    <div class="nav">
        <div class="detail-left">
            <ul>
                <li>
                    <div class="left-icon1"></div>系统总览
                </li>
                <li>
                    <div class="left-icon2"></div>教师管理
                </li>
                <li>
                    <div class="left-icon3"></div>资格证管理
                </li>
                <li>
                    <div class="left-icon4"></div>资格证申请
                </li>
                <li>
                    <div class="left-icon5"></div>统计分析
                </li>
                <li>
                    <div class="left-icon6"></div>系统设置
                </li>
                <li>
                    <div class="left-icon7"></div>帮助中心
                </li>
            </ul>
        </div>
        <div class="detail-right">
            <div class="right-top">
                <h1>系统面板总览</h1>
                <div class="search-1">
                    <div class="search-container-1">
                        <div class="search-box-1" id="searchBox-1">
                            <input type="text" class="search-input-1" placeholder="搜索教师或资格证...">
                            <button class="search-button-1">🔍</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="box1">
                    <div class="box-img1"></div>
                    <div>
                        <h4>12678人</h4>
                        <h6>注册教师</h6>
                    </div>
                </div>
                <div class="box2">
                    <div class="box-img2"></div>
                    <div>
                        <h4>10223个</h4>
                        <h6>有效注册</h6>
                    </div>
                </div>
                <div class="box3">
                    <div class="box-img3"></div>
                    <div>
                        <h4>289个</h4>
                        <h6>申请审核中</h6>
                    </div>
                </div>


            </div>
            <div class="card2">
                <div class="box4">
                    <div class="box-img4"></div>
                    <div>
                        <h4>35个</h4>
                        <h6>即将到期</h6>
                    </div>
                </div>
            </div>
            <div class="table-container">
                <div class="table-header">
                    <div class="table-title">教师资格申请列表</div>
                    <div class="search-filter">
                        <input type="text" class="search-input" placeholder="搜索申请人...">
                        <select class="filter-select">
                            <option value="">全部状态</option>
                            <option value="pending">审核中</option>
                            <option value="approved">已通过</option>
                            <option value="rejected">已拒绝</option>
                        </select>
                    </div>
                </div>

                <div class="table-wrapper">
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>姓名 <span class="sort-icon">↑</span></th>
                                <th>&emsp;&emsp;身份证号</th>
                                <th>&emsp;申请科目 <span class="sort-icon">↕</span></th>
                                <th>申请时间 <span class="sort-icon">↕</span></th>
                                <th>&emsp;状态</th>
                                <th>&emsp;&emsp;操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>张三</td>
                                <td>110101********1234</td>
                                <td>小学语文</td>
                                <td>2025-06-01</td>
                                <td><span class="status-badge status-approved">已通过</span></td>
                                <td>
                                    <div class="action-buttons">
                                        <button class="action-button action-view">查看</button>
                                        <button class="action-button action-edit">编辑</button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>李四</td>
                                <td>310101********5678</td>
                                <td>小学数学</td>
                                <td>2025-06-02</td>
                                <td><span class="status-badge status-pending">审核中</span></td>
                                <td>
                                    <div class="action-buttons">
                                        <button class="action-button action-view">查看</button>
                                        <button class="action-button action-edit">编辑</button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>王五</td>
                                <td>440101********9012</td>
                                <td>中学英语</td>
                                <td>2025-05-28</td>
                                <td><span class="status-badge status-approved">已通过</span></td>
                                <td>
                                    <div class="action-buttons">
                                        <button class="action-button action-view">查看</button>
                                        <button class="action-button action-edit">编辑</button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>赵六</td>
                                <td>510101********3456</td>
                                <td>中学物理</td>
                                <td>2025-06-03</td>
                                <td><span class="status-badge status-rejected">已拒绝</span></td>
                                <td>
                                    <div class="action-buttons">
                                        <button class="action-button action-view">查看</button>
                                        <button class="action-button action-delete">删除</button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>钱七</td>
                                <td>330101********7890</td>
                                <td>小学美术</td>
                                <td>2025-06-04</td>
                                <td><span class="status-badge status-pending">审核中</span></td>
                                <td>
                                    <div class="action-buttons">
                                        <button class="action-button action-view">查看</button>
                                        <button class="action-button action-edit">编辑</button>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="pagination">
                    <div class="pagination-info">显示 1-5 条，共 24 条</div>
                    <div class="pagination-controls">
                        <button>上一页</button>
                        <button class="page-button active">1</button>
                        <button class="page-button">2</button>
                        <button class="page-button">3</button>
                        <button class="page-button">4</button>
                        <button class="page-button">5</button>
                        <button>下一页</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="footer-center">
            <p>© 2025 教师资格管理系统. 【肖美芳】保留所有权利.</p>
        </div>
    </div>
</body>

</html>